<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<style>

    body{
        background: deepskyblue;
    }

    .w {
        width: 1200px;
        height: auto;
        margin: auto;
    }


    .box {
        margin-top: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
    }

    .box input{
        width: 800px;
        height: 50px;
        border: 1px solid pink;
        padding-left: 15px;
        font-size: 26px;
    }

    .box #btn{
        width: 66px;
        height: 54px;
        background: yellowgreen;
        cursor: pointer;
    }

    #data{
        height: 600px;
        margin-top: 60px;
        border: 1px solid pink;
    }


    #data1{
        height: 600px;
        margin-top: 60px;
        border: 1px solid red;
    }

    #data2{
        height: 600px;
        margin-top: 60px;
        border: 1px solid black;
    }


</style>


<body>


<!-- 搜索框    . 类  # ID   -->
<div class="box w">
    <input type="text" placeholder="请输入基金编号">
        <button id="btn">搜索</button>
</div>

<!-- 搜索框结束  -->

<div id="data" class="w">

</div>


<div id="data1" class="w">

</div>


<div id="data2" class="w">

</div>

<!-- 数据展示  -->



<!-- 数据展示结束  -->

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>


<!-- 这个JS 是 echarts 的折现图  -->
<script>
    // exharts初始化操作  动态生成HTML标签
    var ff = echarts.init(document.getElementById('data'))

    option = {

     title:{
         text:"夏洛老师"
     },

          tooltip:{
    trigger:"axis",
    axisPointer:{
      type:'line',
      lineStyle:{
        color:'red'
      }
    }
  },

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};



</script>


<script>
    var ll = echarts.init(document.getElementById('data1'))
    option1 = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};
     ll.setOption(option1)

</script>

<!-- 这个JS 是 Ajax请求  -->
<script>

    $('#btn').click(function () {
            // 获取表单数据
           var text = $('.box input').val();
           console.log(text)

            // 构造数据格式
           var xl = {'data': text,'sign':'202CB962AC59075B964B07152D234B70'};
        // 发包
        $.ajax({
            url: '/api',  // 路由
            type:'GET',   // 方法
            data:xl ,    // 携带数据
            // 发包成功 接收后台数据
            success:function (res) {
                console.log(res)
                // 把后端的时间传参给 X 轴
                option.xAxis.data = res.data.time
                  option.series[0].data = res.data.price
                option.title.text = res.data.title
                    ff.setOption(option)  // 设置到图表

            },
            error:function () {
              cconsole.log('发包失败了！！！')
            }
        })



    })


</script>

</body>
</html>